<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="">
        <el-breadcrumb-item>
          <div class="div1">订单管理</div>
        </el-breadcrumb-item>
        <el-breadcrumb-item
          :to="{
            name: 'orderList',
            query: {
              activeName: this.$route.query.activeName,
            },
          }"
        >
          <div class="div3">我的订单</div>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <div class="div2">修改订单</div>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 面包屑导航 -->
    <div class="basic">
      <p class="header">基本信息</p>
      <div class="content">
        <!-- :disabled='disabledIf' -->
        <el-form
          ref="form"
          :inline="true"
          :model="form"
          label-width="80px"
          disabled
        >
          <el-form-item label="入线方式">
            <el-select v-model="form.Incoming" placeholder="选择入线方式">
              <el-option
                v-for="items in line"
                :key="items.id"
                :label="items.name"
                :value="items.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="客户意向">
            <el-select v-model="form.intention" placeholder="选择客户意向">
              <el-option
                v-for="items in intention"
                :key="items.id"
                :label="items.name"
                :value="items.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="客户等级">
            <el-select v-model="form.category" placeholder="选择客户等级">
              <el-option
                v-for="items in rank"
                :key="items.id"
                :label="items.name"
                :value="items.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="客户姓名">
            <el-input
              v-model="form.name"
              placeholder="请输入客户姓名"
            ></el-input>
          </el-form-item>

          <el-form-item label="客户性别">
            <el-select v-model="form.sex" placeholder="选择性别">
              <el-option label="男" value="1"></el-option>
              <el-option label="女" value="2"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="客户年龄">
            <el-input
              type="number"
              v-model="form.age"
              placeholder="请输入客户年龄"
            ></el-input>
          </el-form-item>

          <el-form-item label="联系电话">
            <el-input
              v-model="form.phone1"
              placeholder="请输入客户电话"
            ></el-input>
          </el-form-item>

          <el-form-item label="联系二">
            <el-input
              v-model="form.phone2"
              placeholder="请输入客户电话"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="receipt">
      <p class="header">收货地址</p>
      <div class="determination" v-if="disabledIf">
        <el-form
          ref="address"
          :inline="true"
          :model="address"
          label-width="100px"
        >
          <el-form-item label="收货人姓名">
            <el-input
              v-model="address.name"
              placeholder="请输入客户姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input
              v-model="address.phone"
              placeholder="请输入收货电话"
            ></el-input>
          </el-form-item>

          <el-form-item label="收货地址">
            <levelAddr
              class="addressContent"
              :province="address.province"
              :city="address.city"
              :area="address.area"
              @updateprovice="getProvince"
              @updatecity="getCity"
              @updatearea="getArea"
            ></levelAddr>
          </el-form-item>

          <el-form-item label="详细地址">
            <el-input
              @blur="getAddObj"
              @keydown.enter.native="getAddObj"
              class="address"
              v-model="address.datail"
              placeholder="请输入客户详细地址"
            ></el-input>
          </el-form-item>

          <!-- <el-form-item>
            <el-button
              type="primary"
              @click="fixAddress"
              v-if="parArray.indexOf('dshxgshdz') != -1"
              >修改收货地址</el-button
            >
          </el-form-item>-->
        </el-form>
      </div>

      <div class="submitAddress" v-if="!disabledIf">
        <p>
          <span>{{ referaddress.addressName }}</span>
          <span> {{ referaddress.addressPhone }}</span>
          <span> {{ referaddress.address }}</span>
          <el-tag
            style="margin-left: 10px"
            v-if="referaddress.isDefault == 1"
            type="primary"
            size="mini"
            >默认收货地址</el-tag
          >
          <el-tag
            v-if="referaddress.userName"
            style="margin-left: 10px"
            type="danger"
            size="mini"
            @click="addressHiddenEvent(referaddress)"
            >编辑</el-tag
          >
        </p>

        <!-- <p class="lingshi" v-if="disabledIf">
          <span
            @click="
              temporary = true;
              addresslistAxios();
            "
            >更改</span
          >
          <span >使用临时地址</span>
        </p> -->
      </div>
    </div>
    <!-- 分配用户列表 -->
    <div class="orderBox">
      <div class="order">
        <p class="headerOrder" style="background: #fff; padding: 10px">
          <span>订单商品</span>
          <el-button type="primary" @click="addgoods">添加/修改商品</el-button>
        </p>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="商品名称">
            <template slot-scope="scope">
              <p>{{ scope.row.title }}</p>
            </template>
          </el-table-column>
          <el-table-column label="商品数量">
            <template slot-scope="scope">
              <div class="numer">
                <span>{{ scope.row.number }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="商品单价">
            <template slot-scope="scope">
              <p>{{ scope.row.sellPrice }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="brandId" label="商品品牌"></el-table-column>
          <el-table-column prop="typeId" label="商品分类"></el-table-column>
          <el-table-column
            prop="specificationName"
            label="商品规格"
          ></el-table-column>
          <el-table-column prop="total" label="商品小计"></el-table-column>
        </el-table>
        <!-- 赠品列表 -->
        <el-table :data="tableZp" style="width: 100%">
          <el-table-column label="赠品名称">
            <template slot-scope="scope">
              <p>{{ scope.row.title }}</p>
            </template>
          </el-table-column>
          <el-table-column label="赠品数量">
            <template slot-scope="scope">
              <div class="numer">
                <span>{{ scope.row.number }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="赠品单价">
            <template slot-scope="scope">
              <p>{{ scope.row.sellPrice }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="brandId" label="商品品牌"></el-table-column>
          <el-table-column prop="categoryId" label="商品分类"></el-table-column>
          <el-table-column
            prop="specificationName"
            label="赠品规格"
          ></el-table-column>
          <el-table-column prop="total" label="赠品小计"></el-table-column>
        </el-table>
      </div>
      <div class="page1">
        <p>
          <span>总计：共 {{ orderNumber }} 件 </span>
        </p>
        <!-- <p>
          <span>运费：</span>
          <el-input v-model="freight" :disabled="disabledIf"></el-input>
        </p> -->
        <p>
          <span>赠品总价：{{ giftPrice }} </span>
        </p>
        <p>
          <span>总价:</span>
          <el-input v-model="total" :disabled="disabledIf"></el-input>
        </p>
        <p>
          <span>已收款:</span>
          <el-input v-model="receivedMoney" :disabled="disabledIf"></el-input>
        </p>
        <p>
          <span style="color: #999">原总价：{{ origTotal }}</span>
        </p>
        <!-- <p>
          <span>经理签字：</span>
          <el-radio-group
            v-model="isManager"
            :disabled="isTurnManager"
            style="margin-top: 3px"
          >
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </p> -->
        <p>
          <el-button type="primary" @click="trueOrder">确定修改</el-button>
        </p>
      </div>
    </div>
    <!-- 分配用户列表 -->
    <!-- 订单备注 -->
    <div class="orderNotes">
      <div class="headerOrder">
        <span>订单备注</span>
        <div class="btn" v-if="!disabledIf">
          <el-upload
            class="float-left avatar-uploader"
            list-type="picture"
            action="#"
            :show-file-list="false"
            :http-request="safeImport"
            :auto-upload="true"
            :file-list="fileList"
            :multiple="true"
          >
            <el-button slot="trigger" size="small" type="primary"
              >上传凭证</el-button
            >
          </el-upload>
        </div>
      </div>
      <div class="notes">
        <el-input
          type="textarea"
          v-model="textarea"
          placeholder="备注"
        ></el-input>
        <p v-for="(item, index) in fileList" :key="index">
          <img
            v-if="!is_null(fileList)"
            v-image-preview
            :src="ImgHttps + item.img"
            class="avatar"
          />
          <span v-if="!is_null(fileList)" @click="close(index)">×</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import levelAddr from "@/components/levelAddr";
import $ from "jquery";
export default {
  components: {
    levelAddr,
  },
  data () {
    return {
      form: {
        Incoming: "",
        intention: "",
        category: "",
        service: "",
        name: "",
        phone1: "",
        phone2: "",
        timer: "",
        address: "",
        province: "",
        city: "",
        area: "",
        sex: "",
        age: "",
      },
      isManager: "0",
      id: "",
      address: {
        name: "",
        phone: "",
        province: "",
        city: "",
        area: "",
        datail: "",
        addressId: "",
      },
      date: "",
      total: 0,
      freight: 0,
      giftPrice: 0,
      receivedMoney: 0,
      tableData: [],
      tableZp: [],
      //接收数据
      line: [],
      intention: [],
      rank: [],
      customer: [],
      isChange: 0, //0正常单
      taskId: "",
      customerId: "",
      addressId: "",
      textarea: "",
      imageUrl: "",
      Img: "",
      fileList: [],
      voucher: "", //凭证
      orderId: "",
      positionCode: sessionStorage.getItem("positionCode"), //职位code
      disabledIf: false,
      keepAddre: "",
      limits: "",
      parArray: [],
      referaddress: "",
    };
  },
  created () {
    // 权限设定判断
    this.limits = JSON.parse(sessionStorage.getItem("limit"));
    const params = this.limits.buttonTreeDto.filter(
      (item) => item.menuCode === "orderListCode"
    );
    params[0].buttonList.forEach((item) => {
      this.parArray.push(item.code);
    });

    console.log(
      this.$route.query.customerId + "---this.$route.query.customerId"
    );

    // 权限设定判断
    this.taskId = this.$route.query.taskId;
    this.customerId = this.$route.query.customerId;
    this.addressId = this.$route.query.addressId;
    this.orderId = this.$route.query.orderId;
    this.receivedMoney = this.$route.query.receivedMoney; //已收款金额
    // 判断是否改单 //
    this.isChange = this.$route.query.isChange;

    if (this.is_null(this.isChange)) {
      this.isChange = 0;
    }
    // 判断组长经理修改订单
    // console.log(this.parArray.indexOf("dshtjxgdd")+"----修改订单----")
    // console.log(JSON.parse(sessionStorage.getItem('isSelf'))+"---JSON.parse(sessionStorage.getItem('isSelf'))");
    if (this.positionCode == "customer" || this.positionCode == "manager") {
      if (
        !this.is_null(sessionStorage.getItem("isSelf")) &&
        JSON.parse(sessionStorage.getItem("isSelf")) == 1
      ) {
        this.disabledIf = false;
      } else {
        this.disabledIf = true;
      }
    } else {
      this.disabledIf = false;
    }
    this.detailAxios();
    this.localization();
    this.commentAxios();
    this.customerlist();
    this.tableData = JSON.parse(sessionStorage.getItem("goodsList"));
    this.isManager = this.$route.query.isManager;
    this.tableZp = JSON.parse(sessionStorage.getItem("giftList"));
    this.voucher = JSON.parse(sessionStorage.getItem("voucher"));
    if (!this.is_null(this.voucher)) {
      this.textarea = this.voucher.note;
      this.fileList = this.voucher.fileImg;
      // console.log(this.fileList)
    }
    let zpNum = 0;
    let numb = 0;
    let zpPrice = 0;
    let price = 0;
    for (let i = 0; i < this.tableZp.length; i++) {
      zpNum += parseInt(this.tableZp[i].number);
      zpPrice += this.tableZp[i].number * this.tableZp[i].sellPrice;
    }
    for (let i = 0; i < this.tableData.length; i++) {
      numb += parseInt(this.tableData[i].number);
      price +=
        parseInt(this.tableData[i].number) *
        parseInt(this.tableData[i].sellPrice);
    }
    this.orderNumber = numb + zpNum;
    this.origTotal = price + zpPrice;
    this.giftPrice = zpPrice;
    this.total = this.$route.query.total;
  },
  methods: {
    getAddObj () {
      this.address.datail = this.address.datail.replaceAll(" ", "");
      $.get(
        "http://120.24.147.235:3002/test",
        { addr: this.address.datail },
        (res) => {
          let addrObj = res.message;
          if (
            this.address.datail.indexOf(
              addrObj.province + addrObj.city + addrObj.county
            ) === 0
          ) {
            this.updateAddr(addrObj);
          } else {
            var t = 0;
            this.address.datail.indexOf(addrObj.province) === 0 ? t++ : (t = t);
            this.address.datail.indexOf(addrObj.city) != -1 ? t++ : (t = t);
            this.address.datail.indexOf(addrObj.county) != -1 ? t++ : (t = t);
            if (t >= 2) {
              this.updateAddr(addrObj);
            }
          }
        }
      );
    },
    updateAddr (e) {
      this.address.province = e.province;
      this.address.city = e.city;
      this.address.area = e.county;
      this.address.datail = this.address.datail.replace(
        this.address.province,
        ""
      );
      this.address.datail = this.address.datail.replace(this.address.city, "");
      this.address.datail = this.address.datail.replace(this.address.area, "");
    },
    // 详情
    detailAxios () {
      this.axios
        .get("/order/comm/customeruser/selectById?id=" + this.customerId)
        .then((res) => {
          // console.log("详情")
          // console.log(res)
          if (res.code == 0) {
            this.form = {
              Incoming: this.$route.query.userDitch,
              intention: this.$route.query.userIntention,
              category: res.data.userLevel,
              service: "", //客服id
              name: res.data.userName,
              phone1: res.data.phone.split(",")[0],
              phone2: res.data.phone.split(",")[1],
              timer: "",
              // address:res.data.detailedAddress,
              // province:res.data.provinceCode,
              // city:res.data.cityCode,
              // area:res.data.regionCode,
              sex: res.data.gender,
              age: res.data.age,
            };
          } else {
            this.$message.error(res.message);
          }
        });
    },

    addgoods () {
      this.$router.push({
        name: "add_order",
        query: {
          isChange: 1,
          userId: this.customerId,
          addressId: this.addressId,
          taskId: this.taskId,
          orderId: this.orderId,
          total: this.total,
          receivedMoney: this.receivedMoney,
          jage: 0,
          userIntention: this.$route.query.userIntention,
          userDitch: this.$route.query.userDitch,
          isCommit: 2,
        },
      });
      if (this.is_null(JSON.parse(sessionStorage.getItem("voucher")))) {
        this.notesEvent();
      }
    },
    // 查询收货地址
    localization () {
      if (this.$route.query.jage == 1) {
        this.axios
          .get("/order/order/user/selectAddress?userId=" + this.customerId, {
            headers: {
              isLoading: false,
            },
          })
          .then((res) => {
            if (res.code == 0 && res.data) {
              this.address = {
                name: res.data.userName,
                phone: res.data.phone,
                province: res.data.provinceCode,
                city: res.data.cityCode,
                area: res.data.regionCode,
                datail: res.data.detailedAddress,
              };
              this.referaddress = res.data;
            }
          });
      } else {
        this.axios
          .get("/order/order/change/selectaddress?orderId=" + this.orderId, {
            headers: {
              isLoading: false,
            },
          })
          .then((res) => {
            console.log(res);
            if (res.code == 0) {
              // this.keepAddre=res.data;
              this.address = {
                name: res.data.addressName,
                phone: res.data.addressPhone,
                province: res.data.province,
                city: res.data.city,
                area: res.data.region,
                datail: res.data.detailedAddress,
                // addressId:res.data.id
              };
              this.referaddress = res.data;
            }
          });
      }
    },
    //*** 修改地址 ***//
    fixAddress () {
      if (this.is_null(JSON.parse(sessionStorage.getItem("voucher")))) {
        this.notesEvent();
      }
      this.$router.push({
        name: "addressList",
        query: {
          isChange: 1,
          jage: 1,
          id: this.customerId,
          taskId: this.taskId,
          orderId: this.orderId,
          total: this.total,
          receivedMoney: this.receivedMoney,
          userIntention: this.$route.query.userIntention,
          userDitch: this.$route.query.userDitch,
        },
      });
    },
    // 客户下拉框数据
    customerlist () {
      this.axios
        .get(
          "/sys/v1/user/employee/by/sales/authority?salesAuthorityId=" +
          JSON.parse(sessionStorage.getItem("salesAuthorityId").split(",")),
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
            this.customer = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    // 修改的地址保存
    keepAddress (param) {
      if (this.address.phone.length != 11) {
        this.$message.error("收货电话不正确");
      } else {
        this.$router.push({
          name: "orderList",
        });
        sessionStorage.removeItem("orderType");
        this.approval(param);
      }
    },
    // 批准 //批量审核
    approval (result) {
      let position = sessionStorage.getItem("positionCode");
      // let ids = [];
      if (this.is_null(position)) {
        if (position == "employee") {
          result = "批准";
        } else if (position == "customer") {
          result = "批准";
        } else if (position == "manager") {
          result = "经理审核";
        }
      }
      // ids.push(this.taskId);
      // this.taskId = ids; //赋值
      if (this.address.phone.length != 11) {
        this.$message.error("手机号码不正确");
      } else {
        this.axios
          .post(
            "/order/order/user/updateorderuser",
            {
              comment: this.textarea,
              result: result,
              orderId: this.orderId,
              taskId: this.taskId,
              addressName: this.address.name,
              addressPhone: this.address.phone,
              province: this.address.province,
              city: this.address.city,
              region: this.address.area,
              detailedAddress: this.address.datail,
            },
            {
              headers: {
                isLoading: false,
              },
            }
          )
          .then((res) => {
            console.log(res);
            if (res.code == 0) {
              this.$message.success("执行成功");
              sessionStorage.removeItem("orderType");
              // if (this.activeName == "1") {
              this.$router.replace({
                name: "orderList",
                query: {
                  activeName: this.$route.query.activeName,
                },
              });
              // }
            } else {
              this.$message.error(res.message);
            }
          });
      }
    },
    // 驳回操作
    rejectEvent (result) {
      let ids = [];
      ids.push(this.taskId);
      this.taskId = ids; //赋值
      if (this.address.phone.length != 11) {
        this.$message.error("收货电话不正确");
      } else {
        this.axios
          .post(
            "/order/order/user/commitTask",
            {
              comment: this.textarea,
              result: result,
              orderIds: [this.orderId],
              taskIds: this.taskId,
              userId: sessionStorage.getItem("user_id"),
            },
            {
              headers: {
                isLoading: false,
              },
            }
          )
          .then((res) => {
            // console.log(res);
            if (res.code == 0) {
              this.$message.success("驳回成功");
              sessionStorage.removeItem("orderType");
              // if (this.activeName == "1") {
              this.$router.replace({
                name: "orderList",
                query: {
                  activeName: this.$route.query.activeName,
                },
              });
            } else {
              this.$message.error(res.message);
            }
          });
      }
    },
    // 驳回操作
    // 改单数据提交
    trueOrder () {
      this.getAddObj();
      if (
        this.is_null(this.address.name) &&
        this.is_null(this.address.phone) &&
        this.is_null(this.address.province) &&
        this.is_null(this.address.city) &&
        this.is_null(this.address.area) &&
        this.is_null(this.address.datail)
      ) {
        this.$message.warning("地址信息不正确");
      } else if (
        this.address.phone.length != 11 ||
        !this.judgeIsNum(this.address.phone)
      ) {
        this.$message.warning("地址电话不正确");
      } else if (this.is_null(this.customerId)) {
        this.$message.warning("客户id为空，请重新去修改");
      } else {
        this.$router.push({
          name: "reviewOrder",
          query: {
            isChange: 1,
            total: this.total,
            freight: this.freight,
            taskId: this.taskId,
            customerId: this.customerId,
            address: this.address,
            orderId: this.orderId,
            receivedMoney: this.receivedMoney,
            activeName: this.$route.query.activeName,
            isManager: this.isManager,
            userIntention: this.$route.query.userIntention,
            userDitch: this.$route.query.userDitch,
            isCommit: 2,
          },
        });
        sessionStorage.setItem("goodsList", JSON.stringify(this.tableData));
        sessionStorage.setItem("giftList", JSON.stringify(this.tableZp));
        sessionStorage.removeItem("orderType");
        this.notesEvent();
      }
    },
    notesEvent () {
      let notes = {
        note: this.textarea,
        fileImg: this.fileList,
      };
      sessionStorage.setItem("voucher", JSON.stringify(notes));
    },
    // 删除
    delectRow (index) {
      this.tableData.splice(index, 1);
      this.calculation();
    },
    delectRowZp (index) {
      this.tableZp.splice(index, 1);
      this.calculation();
    },
    calculation () {
      let zpNum = 0;
      let numb = 0;
      let zpPrice = 0;
      let price = 0;
      for (let i = 0; i < this.tableZp.length; i++) {
        zpNum += this.tableZp[i].number;
        zpPrice += this.tableZp[i].number * this.tableZp[i].sellPrice;
      }
      for (let i = 0; i < this.tableData.length; i++) {
        numb += this.tableData[i].number;
        price += this.tableData[i].number * this.tableData[i].sellPrice;
      }
      this.orderNumber = numb + zpNum;
      this.origTotal = price + zpPrice;
      this.total = this.origTotal;
    },
    //** 普通数据请求 **//
    commentAxios () {
      //入线方式
      this.axios
        .get("/order/comm/customeruser/selectCustomerditch", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          // console.log(res)
          if (res.code == 0) {
            this.line = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
      /*意向*/
      this.axios
        .post(
          "/order/comm/customeruser/selectCustomerintention",
          {
            salesAuthorityId: JSON.parse(
              sessionStorage.getItem("salesAuthorityId")
            ),
          },
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          // console.log(res)
          if (res.code == 0) {
            this.intention = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
      /*等级*/
      this.axios
        .get("/order/comm/customeruser/selectCustomerlevel", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          // console.log(res)
          if (res.code == 0) {
            this.rank = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    // 跳转客户资料
    toInformation () {
      this.$router.push("/customerInformation");
    },
    //加减号
    changeQuantity (row, type) {
      if (type > 0) {
        row.number++;
      } else {
        row.number--;
        row.number > 1 ? row.number : (row.number = 1);
      }
      this.changeCount(row);
    },
    //数量文本框值改变
    changeCount (row) {
      if (null == row.number || row.number == "") {
        row.number = 1;
      } else if (row.number == 1) {
        this.$message({
          message: "已经减到最低了哦",
          type: "warning",
        });
      }
    },
    // 上传图片
    safeImport (fileObj) {
      let formData = new FormData();
      formData.append("file", fileObj.file);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };
      this.axios
        .post(
          "/sys/v1/common/upload/files?pathName=internalSystem",
          formData,
          config
        )
        .then((res) => {
          console.log(res);
          if (res.code == 0) {
            this.imageUrl = res.data.url;
            this.Img = res.data.url;
            let obj = {
              img: this.Img,
            };
            this.fileList.push(obj);
          } else {
            this.$message.error(res.message);
          }
        })
        .catch();
    },
    // 删除图片
    close (index) {
      this.fileList.splice(index, 1);
    },
    // 图片预览

    is_null (content) {
      if (content) {
        return false;
      } else {
        return true;
      }
    },
    getProvince (val) {
      this.address.province = val;
      this.address.city = "";
      this.address.area = "";
    },
    getCity (val) {
      this.address.city = val;
      this.address.area = "";
    },
    getArea (val) {
      this.address.area = val;
    },
  },
  computed: {
    isTurnManager () {
      let temp = this.total != this.receivedMoney;
      if (temp) {
        this.isManager = 1;
      } else {
        this.isManager = 0;
      }
      return temp;
    },
  },
};
</script>

<style scoped lang="scss">
.div1 {
  margin-left: -16px;
  background: url(../../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.div2 {
  margin-left: -16px;
  background: url(../../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}

.div3 {
  margin-left: -8px;
  background: url(../../../assets/breadcrumb3.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.table {
  margin-top: 20px;
}

.col {
  margin-top: 10px;
}

.gift {
  span {
    color: #ff0000;
  }
}

/deep/.el-table .has-gutter .is-leaf {
  color: #2d7edf;
  text-align: center;
}

/deep/.el-table__row {
  text-align: center;
}

/deep/.el-table td,
.el-table th {
  text-align: center;
}

.basic {
  background: #fff;
  padding: 10px;
}

.orderNotes {
  padding: 10px;
  background: #fff;
  margin-bottom: 10px;
}

.notes {
  p {
    margin-top: 10px;
    display: inline-block;
    margin-right: 10px;
    position: relative;
  }

  span {
    display: block;
    width: 18px;
    height: 18px;
    line-height: 20px;
    text-align: center;
    font-size: 13px;
    color: #fff;
    background: #409eff;
    position: absolute;
    top: -5px;
    right: -6px;
    border-radius: 50%;
  }
}

.receipt {
  padding: 10px;
  background: #fff;
  margin-top: 20px;
}

/deep/.el-button {
  padding: 8px 14px;
  margin-left: 30px;
  font-size: 14px;
}

/deep/.address .el-input__inner {
  width: 300px;
}

/deep/.el-input__inner {
  width: 200px;
  height: 30px;
  line-height: 30px;
}

/deep/.distpicker-address-wrapper select {
  padding: 0rem 0.75rem;
  height: 30px;
  line-height: 30px;
  font-size: 15px;
}

.query {
  background: #fff;
  padding: 10px;

  .el-form-item {
    display: inline-block;
    margin-right: 20px;
  }
}

.header {
  font-size: 16px;
  color: #2d7edf;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
}

.headerOrder {
  font-size: 16px;
  color: #2d7edf;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}

/deep/ .query .el-input__inner {
  width: 180px;
}

.selectDate {
  display: inline-block;
  margin-right: 20px;

  span {
    display: inline-block;
    font-size: 15px;
    margin-right: 15px;
    vertical-align: middle;
  }

  .picker {
    display: inline-block;
    vertical-align: middle;
  }

  /deep/.el-input__inner {
    width: 250px;
    height: 28px;
    line-height: 28px;
  }

  /deep/ .el-date-editor .el-range__icon {
    line-height: 23px;
  }

  /deep/ .el-date-editor .el-range-separator {
    line-height: 23px;
  }

  /deep/.el-date-editor .el-range__close-icon {
    line-height: 22px;
  }
}

.operation {
  float: left;
  margin-left: 20px;

  img {
    width: 25px;
    height: 25px;
  }
}

.table {
  /deep/.el-table td,
  .el-table th {
    text-align: center;
  }

  /deep/ .el-table th > .cell {
    text-align: center;
    color: rgb(45, 125, 223);
    font-size: 15px;
  }

  /deep/.el-table__row:hover {
    color: rgb(45, 125, 223);
  }

  /deep/.el-button {
    padding: 0px;
    height: 30px;
    width: 80px;
  }
}

.orderBox {
  position: relative;
  margin-top: 20px;
  padding-bottom: 10px;

  .page1 {
    margin-top: 10px;
    background: #fff;
    padding: 10px;
    text-align: right;

    p {
      display: inline-block;
      vertical-align: middle;
      text-align: center;
    }

    /deep/ .el-input {
      display: inline-block;
      vertical-align: middle;
      width: 100px;
    }

    /deep/ .el-input__inner {
      width: 70px;
      color: #2d7edf;
    }

    span {
      font-size: 14px;
      color: #2d7edf;
      display: inline-block;
      margin-left: 10px;
      vertical-align: middle;
    }
  }
}

.numer {
  /deep/.el-button {
    padding: 5px;
    margin: 0;
    background: #fff;
    border: 1px solid transparent;
    height: 23px;
    font-size: 10px;
    // width:30px;
    border-radius: 0;
  }

  /deep/.el-input-group__prepend {
    padding: 0;
    border-radius: 0;
    border: 1px solid transparent;
  }

  /deep/ .el-input-group {
    width: 80px;
  }

  /deep/.el-input-group__append {
    padding: 0;
    border-radius: 0;
    border: 1px solid transparent;
    // background: #fff;
  }

  /deep/.el-input__inner {
    width: 30px;
    text-align: center;
    padding: 0;
    margin: 0 5px;
    height: 25px;
    line-height: 25px;
  }
}

.avatar-uploader .el-upload {
  border: 1px solid #000;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px dashed #8c939d;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
